<!DOCTYPE html>
<html>
    <head>
        <title>Details | ComDynamics NZQuake</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="../www/jquery.mobile-1.2.0.min.css" />
        <link rel="stylesheet" href="mobile.css" />
        
        <meta name="layout" content="mobile"/>          
    </head>

    <body>   



   
        <div id="details" data-role="page" class="details-page">
            <div data-role="header" data-theme="a">
                <h3>Map</h3>
            </div>

            <div data-role="content" id="map_content" data-theme="a">
                <div id="map_content">
                    <div id="map_canvas"></div>
                </div>
            </div>
        </div>

        <script type="text/javascript" src="mobile.js"></script>

        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="../www/jquery.js"></script>
        <script type="text/javascript" src="../www/jquery-mobile.js"></script>
        <script type="text/javascript">

            function initialize() {
                setupMap(-43.60132, 172.11984, 11, true);
                var quakeEventLatlng = new google.maps.LatLng(-43.601, 172.12);
                var marker = createQuakeEventMarker(quakeEventLatlng)
                marker.setAnimation(google.maps.Animation.DROP)
            }

            // Initialize the map when the jQuery Mobile pageshow event is triggered 
            $('.details-page').live("pageshow", function() {
                if (map == null) {
                    initialize();
                }
            });

        </script>

	<div data-role="page" id="page2">
            <div data-role="header" data-theme="a">
                <h3>button</h3>
            </div>

            <div data-role="content" id="content" data-theme="a">
                               <a href="#page1" data-transition="slide">
                                    press
                                </a>
            </div>
        </div>


    </body>
</html>

